<template>
<div class="tenant-level-list">
    <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
        <FormItem>
            <Select v-model="formItem.status" :style="{'width':'140px'}" clearable>
                <Option value="1">正常</Option>
                <Option value="0">禁用</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Input v-model="formItem.key" placeholder="输入关键词查找..."></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="renderTable('formItem')">查找</Button>
        </FormItem>
    </Form>
    <div class="action-btn">
        <Button size="small" @click="deleteData" style="margin-right: 8px" type="error">批量删除</Button>
        <Button size="small" @click="showModel" type="success">添加租户级别</Button>
    </div>
    <Table border ref="adlist" :columns="list" :data="tablelist" :loading="dataloading" @on-selection-change="changeData">
        <template slot-scope="{ row }" slot="parent">
            <Tag v-if="row.parent_id == 0">第一级</Tag>
            <Tag v-if="row.parent_id != 0">{{ row.parent.level_name }}</Tag>
        </template>
        <template slot-scope="{ row }" slot="status">
            <Tag color="green" v-if="row.status">正常</Tag>
            <Tag color="volcano" v-if="row.status == false">关闭</Tag>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEditLevel(row.id)">编辑</Button>
            <Button type="error" size="small" style="margin-right: 5px;float:left" @click="remove(index,row.id)">删除</Button>
        </template>
    </Table>
    <!-- 分页 -->
    <div class="table-page">
        <Page size="small" ref="listPage" :total="pages.total" :current="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
    </div>
    <!-- 添加的弹出 -->
    <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加级别" width="640" v-model="showModalStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="tenant_level" ref="levelValidate" label-position="right" :label-width="80" action="javascript:void(0)">
            <FormItem label="前一级别" prop="parent_id">
                <Select v-model="tenant_level.parent_id" :style="{'width':'140px'}" clearable aria-placeholder="租户级别">
                    <Option value="0">无</Option>
                    <Option v-for="item in levellist" :value="item.id" :key="item.id">{{ item.level_name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="级别名称" prop="level_name">
                <Input v-model="tenant_level.level_name" placeholder="输入名称..."></Input>
            </FormItem>
            <FormItem label="店铺数量" prop="shop_num">
                <Input v-model="tenant_level.shop_num" placeholder="可创建店铺数量..."></Input>
            </FormItem>
            <FormItem label="供应商数量" prop="supplier_num">
                <Input v-model="tenant_level.supplier_num" placeholder="可创建供应商数量..."></Input>
            </FormItem>
            <FormItem label="有效期" prop="days">
                <Input v-model="tenant_level.days" placeholder="有效天数..."></Input>
            </FormItem>
            <FormItem label="升级价格" prop="prices">
                <Input v-model="tenant_level.prices" placeholder="购买级别所需价格..."></Input>
            </FormItem>
            <FormItem label="状态">
                <i-switch v-model="tenant_level.status">
                    <span slot="on">正常</span>
                    <span slot="off">禁用</span>
                </i-switch>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
                <Button type="primary" @click="createLevel('levelValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <!-- 修改的弹出 -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改级别" width="640" v-model="showEditModalStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="tenant_level" ref="levelValidate" label-position="right" :label-width="80" action="javascript:void(0)">
            <FormItem label="前一级别" prop="parent_id">
                <Select v-model="tenant_level.parent_id" :style="{'width':'140px'}" clearable aria-placeholder="租户级别">
                    <Option :value="0">无</Option>
                    <Option v-for="item in levellist" :value="item.id" :key="item.id">{{ item.level_name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="级别名称" prop="level_name">
                <Input v-model="tenant_level.level_name" placeholder="输入名称..."></Input>
            </FormItem>
            <FormItem label="店铺数量" prop="shop_num">
                <Input v-model="tenant_level.shop_num" placeholder="可创建店铺数量..."></Input>
            </FormItem>
            <FormItem label="供应商数量" prop="supplier_num">
                <Input v-model="tenant_level.supplier_num" placeholder="可创建供应商数量..."></Input>
            </FormItem>
            <FormItem label="有效期" prop="days">
                <Input v-model="tenant_level.days" placeholder="有效天数..."></Input>
            </FormItem>
            <FormItem label="升级价格" prop="prices">
                <Input v-model="tenant_level.prices" placeholder="购买级别所需价格..."></Input>
            </FormItem>
            <FormItem label="状态">
                <i-switch v-model="tenant_level.status">
                    <span slot="on">正常</span>
                    <span slot="off">禁用</span>
                </i-switch>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showEditModalStatus = false">取消</Button>
                <Button type="primary" @click="editLevel('levelValidate')">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
</div>
</template>

<script>
export default {
    name: 'TenantLevelList',
    data() {
        return {
            level_id:0,
            loading: false,
            dataloading: true,
            formItem: {
                'status':'',
                'key': ''
            },
            pages: {
                current: 1,
                total: 0,
                size: 10
            },
            list: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: 'Id',
                    key: 'id',
                    width: 60,
                },
                {
                    title: '前一级别',
                    width: 100,
                    slot: 'parent',
                },
                {
                    title: '名称',
                    minWidth: 200,
                    key: 'level_name',
                },
                {
                    title: '级别数量',
                    width: 120,
                    key: 'shop_num',
                },
                {
                    title: '供应商数量',
                    width: 120,
                    key: 'supplier_num',
                },
                {
                    title: '有效期',
                    width: 80,
                    key: 'days',
                },
                {
                    title: '价格',
                    width: 80,
                    key: 'prices',
                },
                {
                    title: '状态',
                    slot: 'status',
                    width: 90
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 160
                }
            ],
            tablelist: [],
            tenant_level: {
                parent_id: 0,
                level_name: '',
                shop_num: 1,
                supplier_num: 1,
                days: 0,
                prices: 1,
                status: true
            },
            showModalStatus: false,
            showEditModalStatus:false,
            selectData:[],
            levellist:[],
        }
    },
    created: function() {
        // 取数据
        this.getTableList();
    },
    // 组件
    components: {
    },
    methods: {
        changePage() {
            this.pages.current = this.$refs['listPage'].currentPage;
            this.getTableList();
        },
        // 选择id
        changeData: function(index) {
            this.selectData = index
        },
        getTableList: function() {
            var params = { page: this.pages.current,'size':this.pages.size};
            this.$api.tenantlevel.list(params).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                    this.tablelist = res.result.list;
                    this.pages.total = res.result.total
                    this.$Message.success(res.message);
                }
            });
            this.$api.tenantlevel.list({ page: 0,'size':10000}).then(res => {
                if (res.code == 200) {
                    this.levellist = res.result.list;
                }
            });
            return;
        },
        // 展开添加
        showModel() {
            this.showModalStatus = !this.showModalStatus;
            this.tenant_level = {
                parent_id: 0,
                level_name: '',
                shop_num: 1,
                supplier_num: 1,
                days: 0,
                prices: 1,
                status: true
            };
        },
        // 添加
        createLevel(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$api.tenantlevel.create(this.tenant_level).then(res => {
                        if (res.code == 200) {
                            this.getTableList();
                            this.showModalStatus = !this.showModalStatus;
                        }
                        this.loading = false;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        showEditLevel:function(id){
            this.level_id = id;
            this.loading = true;
            this.$api.tenantlevel.detail({level_id:id}).then(res => {
                if (res.code == 200) {
                    this.tenant_level = res.result
                    this.loading = false;
                }
            })
            this.showEditModalStatus = !this.showEditModalStatus;
        },
        editLevel:function(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.tenant_level.level_id = this.level_id
                    this.$api.tenantlevel.edit(this.tenant_level).then(res => {
                        if (res.code == 200) {
                            this.getTableList();
                            this.showEditModalStatus = !this.showEditModalStatus;
                        }
                        this.loading = false;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        // 删除
        remove: function(index, id) {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                this.$api.tenantlevel.remove({ level_id: [id] }).then(res => {
                    if (res.code == 200) {
                    this.$Message.success(res.message);
                    this.tablelist.splice(index, 1);
                    }
                });
                }
            });
        },
        // 筛选
        renderTable: function(name) {
            this.dataloading = true;
            this.pages.currentPage = 1;
            var ps = {'status': this.formItem.status,'key': this.formItem.key,'page':1 ,size:this.pages.size};
            this.$api.tenantlevel.list(ps).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                    this.tablelist = res.result.list;
                    this.pages.total = res.result.total
                    this.$Message.success(res.message);
                }
            });
            return;
        },
        // 批量删除
        deleteData: function() {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                var ids = [];
                this.selectData.forEach((item, index) => {
                    ids.push(item.id);
                })
                this.$api.tenantlevel.remove({ level_id: ids }).then(res => {
                    if (res.code == 200) {
                    this.$Message.success(res.message);
                    this.getTableList();
                    }
                });
                }
            });
        }
    }
}
</script>
